<template>
    <div class="continer">
        <!-- 添加按钮 -->
        <div class="addSpaceBtn">
            <el-button type="primary" @click="addBtn">添加</el-button>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <el-form :model="search" ref="sc" @submit.native.prevent>
                <el-form-item label="" prop="id">
                    <el-input type="text" v-model="search.id" placeholder="请输入文件id"></el-input>
                </el-form-item>
                <el-form-item label="" prop="file_name" style="width: 210px;">
                    <el-input type="text" v-model="search.file_name" placeholder="请输入文件名称"></el-input>
                </el-form-item>
                <el-button type="primary" class="ml_10" @click="getList()" native-type="submit">搜索</el-button>
                <el-button @click="resetForm('sc')">重置</el-button>
            </el-form>
        </div>
        <!-- 显示 -->
        <el-table :data="cyzlList" style="width: 100%" stripe border>
            <el-table-column prop="id" label="id"> </el-table-column>
            <el-table-column prop="file_name" label="文件名称"> </el-table-column>
            <!-- <el-table-column label="文件地址">
                <template slot-scope="scope">
                    <div @click="downFile(scope.row.file_path)" style="cursor: pointer;">{{scope.row.file_path}}</div>
                </template>
            </el-table-column> -->
            <el-table-column label="类别">
                <template slot-scope="scope">
                    <div v-for="(item, index) in addFileCate" :key='index' v-if="item.label == scope.row.cate">{{item.value}}</div>
                </template>
            </el-table-column>
            <el-table-column label="是否删除">
                <template slot-scope="scope">
                    <div>{{scope.row.status == 0 ? '已删除' : '正常'}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
        			<el-button type="text" size="mini" @click="chakan(scope.row)">查看文件</el-button>
        			<el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
        			<el-button type="text" size="mini" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :page-size="limit"
            :total="listLen"
            :current-page.sync="currentPage"
            @current-change="toPage"
            class="txt_r mt_20"
        ></el-pagination>
        <!-- 添加 -->
        <el-dialog :title="addTitle" :visible.sync="showAddFlag" width="60%">
            <el-form :model="addForm" ref="add" @submit.native.prevent :rules="addFormRules">
                <el-form-item label="文件名称 : " prop="file_name">
                    <el-input type="text" v-model="addForm.file_name" placeholder="请输入文件名称"></el-input>
                </el-form-item>
                <el-form-item label="文件地址 : " prop="file_path">
                    <el-upload
                      class="upload-demo"
                      :action="BASE_URL + '/admin/file/upload/createfile'"
                      :multiple='false'
                      :limit="1"
                      :file-list="fileList"
                      :on-success="addPathSuccess"
                      :on-remove="addPathRemove"
                      :on-exceed="addPathExceed"
                      >
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="文件类别 : " prop="cate">
                    <el-radio-group v-model="addForm.cate">
                        <el-radio v-for="(item, index) in addFileCate" :key='index' :label="item.label">{{item.value}}</el-radio>
                      </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="infor" @click="addQuxiao">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getinfo, setinfo, modifyinfo, delinfo } from "../../api/changyongziliao/changyongziliao.js";
    import { BASE_URL } from '../../config/app.js';
    export default {
        name: "changyongziliao",
        data() {
            return {
                // 显示
                search: {
                    id: '',
                    file_name: ''
                },
                cyzlList: [],
                limit: 30, // 分页
                listLen: 0,
                currentPage: 1,
                // 添加
                showAddFlag: false,
                BASE_URL: '',
                addFileCate: [
                    {value: '技术合同', label: '1'},
                    {value: '企业用工合同', label: '2'},
                    {value: '其他资料', label: '3'},
                ],
                addForm: {
                    file_name: '',
                    file_path: '', // 文件保存路径
                    cate: '1'
                },
                addFormRules: {
                    file_name: [{required: true,message: "请输入文件名称",trigger: "blur"}],
                    file_path: [{required: true,message: "请输入文件地址",trigger: "blur"}],
                    cate: [{required: true,message: "请输入文件类别",trigger: "blur"}],
                },
                fileList: [],
                addTitle: '添加',
            }
        },
        methods:{
            getList(){
                getinfo(this.search).then((res) => {
                    if(res.code == 0){
                        this.cyzlList = res.data.list;
                        this.listLen = res.data.total;
                    }else{
                        this.$message.error(res.message);
                    }
                })
            },
            resetForm(name){ // 重置
                this.$refs[name].resetFields();
            },
            chakan(row){ // 查看
                window.location.assign(this.BASE_URL + '/' + row.file_path);
            },
            downFile(file_path){
                window.location.assign(this.BASE_URL + '/' + file_path);
            },
            // 修改
            edit(row){
                this.showAddFlag = true;
                this.addForm = row;
                this.fileList = [{name: row.file_path}];
                this.addTitle = '修改';
            },
            // 删除
            del(id){
                this.$confirm("确定删除该文件吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then((response)=>{
                    delinfo({
                        id: id
                    }).then((res) => {
                        console.log(res);
                        if(res.code == 0){
                            this.$message.success("删除成功");
                            this.getList();
                        }else{
                            this.$message.error(res.message);
                        }
                    })
                }).catch(()=>{
                    this.$message.info("取消删除");
                });
            },
            // 分页
            toPage(val){
                this.currentPage = val;
                this.getList(val);
            },
            // 添加
            addBtn(){
                this.showAddFlag = true;
                this.addTitle = '添加';
            },
            addQuxiao(){
                this.showAddFlag = false;
                this.resetForm('add');
                this.fileList = [];
            },
            addSubmit(){
                let data = JSON.parse(JSON.stringify(this.addForm));
                this.$refs['add'].validate((valid) => {
                    if (!valid) {return false;}
                    if(this.addTitle == '添加'){
                        setinfo(data).then((res) => {
                            if(res.code == 0){
                                this.showAddFlag = false;
                                this.search = {id: '', file_name: ''};
                                this.getList();
                                this.resetForm('add');
                                this.fileList = [];
                            }else{
                                this.$message.error(res.message);
                            }
                        })
                    }else if(this.addTitle == '修改'){
                        console.log(data)
                        modifyinfo(data).then((response) => {
                            if(response.code == 0){
                                this.showAddFlag = false;
                                this.search = {id: '', file_name: ''};
                                this.getList();
                                this.resetForm('add');
                                this.fileList = [];
                            }else{
                                this.$message.error(res.message);
                            }
                        })
                    }
                })
            },
            addPathSuccess(response, file, fileList){
                if(response.code == 0){
                    this.addForm.file_path = response.data.key;
                }else{
                    this.$message.error(response.message);
                }
                console.log(fileList)
            },
            addPathRemove(file, fileList){
                this.addForm.file_path = "";
            },
            addPathExceed(){ // 上传文件超出限制个数
                this.$message.warning("上传文件超出限制个数");
            }


        },
        created() {
            this.getList();
            this.BASE_URL = BASE_URL;
        }
    }
</script>

<style>
    .search{float: right;}
    .search .el-form-item{margin-bottom: 20px; display: inline-block; margin-right: 15px;}
</style>
